<template>
	<view class="store-join" :style="[AppSkinVar]">
		<view class="e-p-t-40 e-p-b-40">
			<steps :value="stepIndex" />
		</view>
		<view class="store-join__form-card e-rela" v-show="stepIndex < 3">
			<view class="store-join__form-card__back bg-white">
				<formTwo :primary="AppSkin.primary" :value="category?.name" @openPicker="showCategoryPicker = true"
					@back="stepIndex = 1" @next="next(3)" />
			</view>
		</view>
		<formThree :primary="AppSkin.primary" :type="type" @back="stepIndex = 2" v-show="stepIndex === 3"
			@submit="submit" />
		<e-picker :show="showPicker" :confirmColor="AppSkin.primary" :columns="[countryAreaList]"
			@cancel="showPicker = false" @confirm="handleGetContry" keyName="countryArea"></e-picker>
		<e-picker :show="showCategoryPicker" :confirmColor="AppSkin.primary" :columns="goodsCategoryList"
			@cancel="showCategoryPicker = false" @confirm="handleGetCategory" keyName="name"></e-picker>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import steps from './child/steps.vue'
	// import formOne from './child/formOne.vue'
	import formTwo from './child/formTwo.vue'
	import formThree from './child/formThree.vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		postStoreExamine,
		getGoodsClassify
	} from '@/common/request/api'
	import type { ClassifyItem, CountryAreaItem,StoreExamineParams } from '@/common/request/api'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useInit,
		useUser
	} from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'

	const props = defineProps({
		type: {
			type: String,
			required: true
		}
	})

	const ctx = useCurrentInstance()
	const {AppSkin} = storeToRefs(useInit())

	const stepIndex = ref(1)
	// const params = ref<RecordAny>({})
	const showPicker = ref(false)
	const userStore = useUser()
	const { countryAreaList } = storeToRefs(userStore)
	userStore.getCountryAreaList()
	
	const countryArea = ref<CountryAreaItem | undefined>(undefined)
	const showCategoryPicker = ref(false)
	const goodsCategoryList = ref<[ClassifyItem[]]>([[]])
	const category = ref<ClassifyItem | undefined>(undefined)



	const next = (index : number) => {
		// if (index === 2) {
		// 	// params.value = data
		// }
		if (index === 3 && !category.value) {
			ctx.$toastApp(ctx.$t('store.qxzlm'))
			return
		}
		stepIndex.value = index
	}
	const handleGetContry = (arr : { value : CountryAreaItem[] }) => {
		countryArea.value = arr.value[0]
		showPicker.value = false
	}
	const handleGetCategory = (arr : { value : ClassifyItem[] }) => {
		category.value = arr.value[0]
		showCategoryPicker.value = false
	}
	const submit = (storeDto:Omit<StoreExamineParams,'type'|'countryId'|'industry'>) => {
		postStoreExamine({
			...storeDto,
			type: props.type,
			countryId: countryArea.value?.id,
			industry: category.value?.id
		}).then(() => {
			ctx.$goRedirectTo('/pages/store/join/success', {
				type: 'success'
			})
		})
	}


	onLoad(() => {

		getGoodsClassify({
			type: props.type
		}).then(res => {
			goodsCategoryList.value = [res.data]
		})
	})
</script>
<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.store-join {
		// #ifdef APP-PLUS
		padding-top: 44px;

		// #endif
		&__form-card {
			// transition: transform 1s;
			// transform-style: preserve-3d;

			// &--flipped {
			// 	transform: rotateY(180deg);

			// 	.store-join__form-card__back {
			// 		display: block;
			// 	}
			// }

			&__front,
			&__back {
				padding: 112rpx 70rpx 0 70rpx;
				width: 100vw;
				// height: 900rpx;
				// left: 0;
				// top: 0;
			}

			&__front {
				z-index: 1;
				// backface-visibility: hidden;
			}

			// &__back {
			// 	transform: rotateY(180deg);
			// 	display: none;
			// }
		}
	}
</style>